<template>
    <view class="auth-container">
        <!-- 返回按钮 -->
        <view class="back-button" @click="goToWelcome">
            <image class="back-icon" src="/static/back-icon.png"></image>
        </view>

        <view class="header">
            <view class="title-container">
                <text class="title">生命故事盒子</text>
                <text class="subtitle">欢迎使用生命故事盒子</text>
            </view>
        </view>

        <view class="auth-form">
            <view class="form-item">
                <text class="form-label">账号</text>
                <input class="form-input" type="text" v-model="username" placeholder="请输入账号" />
                <text v-if="errors.username" class="error-text">{{ errors.username }}</text>
            </view>

            <view class="form-item">
                <text class="form-label">密码</text>
                <input class="form-input" type="password" v-model="password" placeholder="请输入密码" password />
                <text v-if="errors.password" class="error-text">{{ errors.password }}</text>
            </view>

            <view class="auth-btn-container">
                <button class="auth-btn" @click="login">登录</button>
            </view>

            <view class="login-tips">
                <text>前端测试临时账号</text>
                <text>账号：lifestorybox</text>
                <text>密码：12345678</text>
            </view>

            <view class="auth-link">
                <text>没有账号？</text>
                <text class="link" @click="goToRegister">注册账号</text>
            </view>
        </view>
    </view>
</template>

<script>
import { login } from '../../api/user.js';

export default {
    data() {
        return {
            username: '',
            password: '',
            errors: {
                username: '',
                password: ''
            },
            loading: false
        }
    },
    methods: {
        // 添加返回欢迎页
        goToWelcome() {
            uni.switchTab({
                url: '/pages/login/welcome'
            });
        },

        validateForm() {
            let isValid = true;
            this.errors = {
                username: '',
                password: ''
            };

            if (!this.username.trim()) {
                this.errors.username = '请输入账号';
                isValid = false;
            }

            if (!this.password.trim()) {
                this.errors.password = '请输入密码';
                isValid = false;
            }

            return isValid;
        },
        login() {
            if (!this.validateForm()) {
                return;
            }

            this.loading = true;

            // 调用登录API
            login({
                userAccount: this.username,
                userPassword: this.password
            }).then(res => {
                // 登录成功
                const userInfo = res.data;
                console.log('userInfo', userInfo);

                // 存储用户信息到本地
                uni.setStorageSync('userInfo', {
                    userId: userInfo.userId,
                    userAccount: userInfo.userAccount,
                    userName: userInfo.userName,
                    userSex: userInfo.userSex,
                    phoneNumber: userInfo.phoneNumber,
                    userBirthday: userInfo.userBirthday,
                    userAge: userInfo.userAge,
                    userBirthPlace: userInfo.userBirthPlace,
                    userLivePlace: userInfo.userLivePlace,
                    userRole: userInfo.userRole,
                    isLoggedIn: true
                });

                // 显示成功提示
                uni.showToast({
                    title: '登录成功',
                    icon: 'success',
                    duration: 1500
                });

                // 跳转到主页面
                setTimeout(() => {
                    uni.reLaunch({
                        url: '/pages/main/index'
                    });
                }, 1500);
            }).catch(err => {
                // 登录失败
                uni.showToast({
                    title: err.message || '账号或密码错误',
                    icon: 'none',
                    duration: 2000
                });
            }).finally(() => {
                this.loading = false;
            });
        },
        goToRegister() {
            uni.navigateTo({
                url: '/pages/login/register'
            });
        }
    }
}
</script>

<style>
@import url('/static/css/login-common.css');
</style>